<!DOCTYPE html>
<html>
  <head>
    <title>IOT LAO WANG</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="stylesheet.css">
  </head>
  <body>
    <h1>Change text style</h1>
    <p id="text">This text will change style.</p>
    <p>
      <button onclick="document.getElementById('text').style.color='red'">Red Text</button>
    </p>
    <p>
      <button onclick="document.getElementById('text').style.color='blue'">Blue Text</button>
    </p>
    <p>
      <button onclick="document.getElementById('text').style.display='none'">Hide Text</button>
    </p>
    <p>
      <button onclick="document.getElementById('text').style.display='block'">Show Text</button>
    </p>
    <p>
    <button onclick="bgChange()">Change Background</button>
    </p>
    <script>
      function bgChange() {
        const randomHex = () => `#${Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, "0")}`;
        document.body.style.backgroundColor = randomHex();
      }
    </script>
  </body>
</html>